<template>
    <!-- 人员管理下的员工管理里的:管理老人组件 -->
    <div>
        <el-dialog title="老人名单:" :visible.sync="dialogTableVisible" width="68%">
          <el-table
            :data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
            :default-sort = "{prop: 'create_time', order: 'descending'}"
            stripe
            height="530"
            max-height="530"
            >

            <el-table-column
              label="创建时间"
              prop="create_time"
              sortable
              width="100"
              >
            </el-table-column>

            <el-table-column
              label="用户名"
              prop="username"
              width="140"
              >
              <template slot-scope="scope">
                    <el-tag size="medium">{{ scope.row.username }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column
              label="性别"
              prop="sex"
              width="50"
              >
            </el-table-column>

            <el-table-column
              label="年龄"
              prop="age"
              sortable
              width="80"
              >
            </el-table-column>

            <el-table-column
              label="身份证"
              prop="id_card"
              width="150"
              >
            </el-table-column>

            <el-table-column
              label="地址"
              prop="address"
              width="210"
              >
            </el-table-column>

            <el-table-column
              label="亲属"
              prop="clan"
              width="110"
              >
            </el-table-column>

            <el-table-column
              label="亲属电话"
              prop="clan_phone"
              width="120"
              >
            </el-table-column>

            <el-table-column
              width="150"
              align="center">
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入用户名"
                  @click="fun(scope.row)"
                  />
              </template>

              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="warning"
                  @click="handleEdit(scope.$index, scope.row)">
                  变更
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">
                  删除
                </el-button>
              </template>

            </el-table-column>

          </el-table>
        </el-dialog>
        <el-dialog
          title="提示"
          :visible.sync="centerDialogVisible"
          width="30%"
          center>

          <el-select v-model="employeeId" placeholder="请选择变更的员工" style="width: 100%;">
            <el-option :label="item.username" :value="item.id" v-for="item in employeeList" :key="item.id"></el-option>
          </el-select>

          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeEmployee">确 定</el-button>
          </span>
        </el-dialog>
    </div>

</template>

<script>
import myAxios from '@/tools/myAxios';
export default {
    name:'EmployeeManageOlder',
    data() {
      return {
        // 控制老人列表展示
        dialogTableVisible:false,
        // 老人列表展示对话框的搜索
        search: '',
        // 老人列表所展示的数据
        tableData:[],
        // 控制变更对话框的展示
        centerDialogVisible:false,
        // 变更后的员工id
        employeeId:null,
        // 需要变更的老人的id
        olderId:0,
        // 所有的员工信息
        employeeList:[]
      }
    },
    watch:{
      // 监听老人列表展示的数据的状态
      tableData(){
        this.dialogTableVisible = true;
      }
    },

    methods:{
      // 提交变更
      changeEmployee(){
        myAxios(
          'http://localhost:8088/employee/changeoldertheemployee?employeeid='+this.employeeId+'&olderid='+this.olderId,
          'get',
          null,
          (data)=>{
            this.$notify({
                title: '成功',
                message: '变更成功!',
                type: 'success'
              });
              window.location.reload();
          }
        )
      },
      // 点击变更按钮操作
      handleEdit(index, row){
        this.centerDialogVisible = true;
        this.olderId = row.id;
      },
      // 删除老人信息
      handleDelete(index, row) {
        myAxios(
          'http://localhost:8088/employee/deleteolderinfo?olderid='+row.id,
          'get',
          null,
          (data)=>{
              this.$notify({
                title: '成功',
                message: '删除老人成功!',
                type: 'success'
              });
              window.location.reload();
          }
        )
      },
      // 事件的回调(展示老人列表的数据)
      apperOlderList(data){
        this.tableData = data;
      }
    },
    mounted(){
        // 绑定自定义事件
        this.$bus.$on('clickOlderList',this.apperOlderList);

        // 获取所有的员工信息
        myAxios(
          'http://localhost:8088/employee/getallemployeelist',
          'get',
          null,
          (data)=>{
            this.employeeList = data;
          }
        )
    },
    beforeDestroy(){
        // 解绑
        this.$bus.$off('clickOlderList');
    }
}
</script>

<style scoped lang="less">
</style>